<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../vue.js"></script>
</head>
<body>
    <div id="app"></div>
    <!-- 
        template 模版,视图
        1.template 和 挂载点都可以设置视图, template优先级高于 挂在点肿的视图
     -->
     <!-- 使用template标签定制组件模版 -->
     <template id="mytem1">
        <div>
            <h3>mytem1模版</h3>
            <div>num:{{ num }}</div>
            <button @click="_click">点击</button>
            <ul>
                <li v-for="(item) in 5">{{ item }}</li>
            </ul>
        </div>
     </template>
     <template id="mytem2">
        <div>
            <h3>mytem2模版</h3>
        </div>
     </template>
     <script>
        new Vue({
            el:"#app",
            // template:"<div><h3>123</h3><div>{{ num }}</div></div>", // 必须有一个根元素
            template: '#mytem1',
            data:{
                num:10
            },
            methods: {
                _click(){
                    alert(1)
                }
            },
        })
     </script>
</body>
</html>